<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
        <!-- 1。4渲染页面 -->
    <li :class="{ completed: item.isDone }" v-for="item in list" :key="item.id">
      <div class="view">
        <!-- 1.5给input双向绑定 -->
          <!-- 2.0 v-model和父组件双向数据绑定，违反单向数据流的原则。
                 把v-model改成 :checked ，给checkbox注册change事件 -->
        <input class="toggle" type="checkbox" @change="changeFn(item.id)" :checked='item.isDone' />
        <label>{{ item.name }}</label>
           <!-- 1.6删除按钮：给删除按钮注册点击事件 -->
        <button class="destroy" @click='del(item.id)'></button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  // 1.2通过props接受父组件传过来的list
  props: {
    list: {
      type: Array,
      reqtired: true,
    },
  },
    //1.7 通过$emit把值传给父组件
  methods:{
    del(id){
      this.$emit('del',id)
    },
    // 2.1子传父，让父组件修改
    changeFn(id){
      this.$emit('change',id)
    }
  }
}
</script>
